<template>
  <div>
    <el-dialog title="导入库位" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false" @closed="closed">
      <el-upload
        ref="upload"
        class="upload-demo"
        action="/"
        multiple
        drag
        :before-upload="beforeAvatarUpload"
        :limit="1"
        :http-request="uploadFn"
      >
        <div class="text">
          <img v-if="!bool" src="@/assets/images/upload.png" alt="">
          <img v-else src="@/assets/images/uploadisabled.png" alt="">
          <div class="el-upload__text">
            <p>点击或将表格文件拖拽到这里上传</p>
            <p>仅支持单个表单文件导入</p>
          </div>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button class="minorImportantButton unimportanceButton" @click="closeFn">取 消</el-button>
        <el-button type="primary" class="minorImportantButton" :disabled="file?false:true" @click="yasUpload">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-if="uploadMessage" title="导入库位" :visible.sync="messageVisible" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="message">
        <div class="title"> 导入成功<span style="color:#00c753;">{{ uploadMessage.success }}</span>条，失败<span style="color:#ff4d4f;">{{ uploadMessage.message.length }}</span>条</div>
        <div class="detile">
          <span v-for="(item,index) in uploadMessage.message" :key="index">{{ item }}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="minorImportantButton" @click="messageVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uploadLocation } from '@/api'

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      bool: false,
      file: null,
      messageVisible: false,
      uploadMessage: null,
      visible: null
    }
  },
  watch: {
    dialogVisible: {
      handler(val) {
        console.log(val)
        this.visible = val
      },
      immediate: true
    }
  },
  created() {
    this.bool = false
  },
  methods: {
    beforeAvatarUpload(file) {
      console.log(file)
      const fileList = [
        '.xlsx',
        '.xls'
      ]
      const isJPG = fileList.includes(file.name
        .substr(file.name.lastIndexOf('.'))
        .toLowerCase())// 文件后缀名字
      const isLt2M = file.size / 1024 / 1024 < 1

      if (!isJPG) {
        this.$message.error('请上传正确格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 1M!')
      }
      return isJPG && isLt2M
    },
    async uploadFn(obj) {
      const formData = new FormData()
      formData.append(
        'file',
        obj.file
      )
      this.bool = true
      this.file = formData
    },
    // 确定上传
    async yasUpload() {
      const res = await uploadLocation(this.file)
      console.log(res.data.data.message)
      this.uploadMessage = res.data.data
      this.$emit('closeFn')
      this.messageVisible = true
    },
    closed() {
      this.$emit('closeFn')
      this.$refs.upload.clearFiles()
    },
    // 关闭message 弹窗
    closeFn() {
      this.$emit('closeFn')
      this.bool = false
    }
  }
}
</script>

<style lang="scss" scoped>
img{
  width: 57px;
    height: 57px;
}
.text{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  p{
    color: #606266;
    font-size: 14px;
    text-align: center;
    &:first-child{
      font-size: 16px;
      color: #1f2d3d;
    }
  }

}
.message {
  padding: 12px 20px 20px;
  background: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  text-align: center;
  color: #332929;
 min-height: 200px;
  line-height: 20px;

  .title {
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 8px;
    text-align: center;

  }
  .detile {
    text-align: left;
    span{
    margin-right: 10px;
    color: #b5abab;
    padding-bottom: 5px;
    }
  }
}
</style>
